import React, { Component } from 'react';
import { Divider } from 'antd';
import { getVersion } from '@api/version';
import HistoryImg from './image/update-history.png';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import _ from 'lodash';
import './index.less';
class UpdateHistrory extends Component {
  static propTypes = {
    cert: PropTypes.object
  };
  state = {
    list: []
  };
  componentDidMount() {
    getVersion().then(res => {
      this.setState({
        list: res.data.data.list
      });
    });
  }
  render() {
    const { list } = this.state;
    const { cert } = this.props;
    const oemId = _.get(cert, 'oem_id');
    return (
      <div className="update-history">
        <div className="content">
          <div className="page-title">升级历史</div>
          <div className="title">
            <i>{oemId ? _.get(cert, 'oem_product_name_cn', '') : 'ZoomEye Pro'}</i>
            <span>{list.length && list[0].version}</span>
          </div>
          <div>
            {list.map((item, index) => {
              return (
                <div key={index}>
                  <div className="update-history-item">
                    <div className="update-history-item-title">
                      <span className="update-history-item-latest">{item.version}</span>
                      <span className="update-history-item-latest">{item.time}</span>
                    </div>
                    <div className="update-history-item-detail">
                      {item.content.map((ct, index) => {
                        return <span key={index}>{`${index + 1}.${ct}`}</span>;
                      })}
                    </div>
                  </div>
                  <Divider />
                </div>
              );
            })}
          </div>
        </div>
        <div className="update-history-img">
          <img src={HistoryImg} alt="" width="100%" />
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    cert: _.get(state, 'auth.cert', {})
  };
};

export default connect(mapStateToProps)(UpdateHistrory);
